<template>
  <div class="exercise-container">
    <div class="header">
      <h3>运动管理</h3>
    </div>

    <div class="plan-card">
      <h4>制定运动计划</h4>
      <el-form :model="exercisePlan" label-position="top">
        <el-form-item label="运动类型">
          <el-input v-model="exercisePlan.type" placeholder="例如：快走、有氧操、瑜伽（有助于皮肤血液循环）" />
        </el-form-item>
        <el-form-item label="每周目标时长 (分钟)">
          <el-input-number v-model="exercisePlan.targetDuration" :min="0" :max="1000" controls-position="right" />
        </el-form-item>
        <el-form-item label="每周目标频率 (次)">
          <el-input-number v-model="exercisePlan.targetFrequency" :min="0" :max="7" controls-position="right" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="planLoading" @click="saveExercisePlan">
            保存运动计划
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="record-card">
      <h4>记录今日运动</h4>
      <el-form :model="exerciseRecord" label-position="top">
        <el-form-item label="运动类型">
          <el-input v-model="exerciseRecord.type" placeholder="例如：快走、瑜伽、游泳" />
        </el-form-item>
        <el-form-item label="实际时长 (分钟)">
          <el-input-number v-model="exerciseRecord.duration" :min="0" :max="1000" controls-position="right" />
        </el-form-item>
        <el-form-item label="距离 (公里, 可选)">
          <el-input-number v-model="exerciseRecord.distance" :min="0" :max="100" :precision="1" :step="0.1"
            controls-position="right" />
        </el-form-item>
        <el-form-item label="备注 (可选)">
          <el-input v-model="exerciseRecord.notes" type="textarea" :rows="2" placeholder="如：运动后皮肤感觉清爽/有无新痘/是否泛红瘙痒等" />
        </el-form-item>
        <el-form-item>
          <el-button type="success" :loading="recordLoading" @click="submitExerciseRecord">
            提交运动记录
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="history-link">
      <el-button link type="primary" @click="goToHistory">查看历史运动记录</el-button>
    </div>

  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
// 假设的API函数，待实际对接后端
import { createExercisePlanApi, createExerciseRecordApi } from '../api/exercise'

const router = useRouter()

const exercisePlan = reactive({
  type: '',
  targetDuration: null,
  targetFrequency: null,
})

const exerciseRecord = reactive({
  type: '',
  duration: null,
  distance: null,
  notes: ''
})

const planLoading = ref(false)
const recordLoading = ref(false)

const saveExercisePlan = async () => {
  if (!exercisePlan.type || exercisePlan.targetDuration === null || exercisePlan.targetFrequency === null) {
    ElMessage.warning('请填写完整的运动计划信息')
    return
  }

  planLoading.value = true
  try {
    const res = await createExercisePlanApi(exercisePlan)
    if (res && res.data) {
      ElMessage.success('运动计划保存成功！')
      // 清空表单或刷新当前计划显示
      exercisePlan.type = ''
      exercisePlan.targetDuration = null
      exercisePlan.targetFrequency = null
    } else {
      ElMessage.error(res.message || '运动计划保存失败')
    }
  } catch (error) {
    console.error('保存运动计划失败:', error)
    ElMessage.error('保存运动计划失败，请重试')
  } finally {
    planLoading.value = false
  }
}

const submitExerciseRecord = async () => {
  if (!exerciseRecord.type || exerciseRecord.duration === null) {
    ElMessage.warning('请填写运动类型和时长')
    return
  }

  recordLoading.value = true
  try {
    const res = await createExerciseRecordApi(exerciseRecord)
    if (res && res.data) {
      ElMessage.success('运动记录提交成功！')
      // 清空表单
      exerciseRecord.type = ''
      exerciseRecord.duration = null
      exerciseRecord.distance = null
      exerciseRecord.notes = ''
    } else {
      ElMessage.error(res.message || '运动记录提交失败')
    }
  } catch (error) {
    console.error('提交运动记录失败:', error)
    ElMessage.error('提交运动记录失败，请重试')
  } finally {
    recordLoading.value = false
  }
}

const goToHistory = () => {
  router.push('/exercise/history')
}
</script>

<style scoped>
.exercise-container {
  padding: 20px;
  background-color: #f7f8fa;
  min-height: calc(100vh - 50px);
  padding-bottom: 70px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.header h3 {
  font-size: 22px;
  color: #333;
}

.plan-card,
.record-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.plan-card h4,
.record-card h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #2e8b57;
  font-size: 18px;
}

.plan-card .el-button {
  width: 100%;
  background-color: #ff9800;
  /* 橙色强调 */
  border-color: #ff9800;
  border-radius: 8px;
  margin-top: 10px;
}

.record-card .el-button {
  width: 100%;
  background-color: #2e8b57;
  /* 深绿色 */
  border-color: #2e8b57;
  border-radius: 8px;
  margin-top: 10px;
}

.history-link {
  text-align: center;
  margin-bottom: 20px;
}

/* 调整输入框和数字输入框圆角 */
:deep(.el-input__wrapper),
:deep(.el-textarea__inner) {
  border-radius: 8px;
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper.is-focus),
:deep(.el-textarea__inner:focus) {
  box-shadow: 0 0 0 1px #2e8b57 inset;
}

:deep(.el-input-number__increase, .el-input-number__decrease) {
  border-radius: 0 8px 8px 0 !important;
}
</style>